<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  // module03
  /*OffLightState*/
  let OffLightState = function (light) {
    this.light = light;
  }

  OffLightState.prototype.buttonWasPressed = function () {
    console.log("弱光");
    this.light.setState(this.light.weakLightState);
  }


  /*WeakLightState*/
  let WeakLightState = function (light) {
    this.light = light;
  }

  WeakLightState.prototype.buttonWasPressed = function () {
    console.log("强光");
    this.light.setState(this.light.strongLightState);
  }


  /*StrongLight*/
  let StrongLightState = function (light) {
    this.light = light;
  }

  StrongLightState.prototype.buttonWasPressed = function () {
    console.log("关灯");
    this.light.setState(this.light.weakLightState);
  }


  /*Light*/
  let Light = function () {
    this.OffLightState = new OffLightState(this);
    this.weakLightState = new WeakLightState(this);
    this.strongLightState = new StrongLightState(this);
    this.button = null;
  }

  Light.prototype.init = function () {
    let button = document.createElement("button");
    let self = this;

    this.button = document.body.appendChild(button);
    button.innerHTML = "开关";

    this.currentState = this.OffLightState;

    this.button.onclick = function () {
      self.currentState.buttonWasPressed();
    }
  }

  Light.prototype.setState = function (newState) {
    this.currentState = newState;
  }

  let light = new Light();
  light.init();
</script>

</html>